*, :after, :before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

.scale-slider {
    position: fixed;
    right: 0;
    z-index: 99;
		.btn {
			display: inline-block;
			padding: 4px;
			border: 1px solid #cacaca;
			border-radius: 3px;
			background: #fff;
			margin-left: 10px;
			margin-right: 10px;
			cursor: pointer;
	}
}

.flow-container {
    display: inline-block;
    background: #ebeef5;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    overflow: auto;
}

.node-wrap-box
{
	position:relative;
	display:flex;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
}

.node-wrap-box.branchFlow,.node-wrap-box.condition,.node-wrap-box.interflow
{
	padding:30px 50px 0;
}

.node-wrap-box.empty
{
	overflow:hidden;
}

.node-wrap-box.approver:before
{
	content:"";
	position:absolute;
	top:-10px;
	left:50%;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
	width:0;
	height:4px;
	background:#ebeef5;
	border-color:#a9b4cd transparent transparent;
	border-style:solid;
	border-width:8px 6px 4px;
}

.node-wrap-box.approver.branchFlow:before,.node-wrap-box.approver.interflow:before
{
	top:20px;
}

.node-wrap-box.error .error-tip
{
	right:-40px;
}

.node-wrap-box.error .flow-path-card
{
	border:1px solid red;
}

.node-wrap-box.error .flow-path-card:hover
{
	border-width:0;
}

.node-wrap-box .error-tip
{
	position:absolute;
	right:1px;
	top:15%;
	width:30px;
	height:30px;
	color:red;
	cursor:pointer;
	border-radius:50%;
	border:1px solid;
	line-height:30px;
	-webkit-transition:right .5s;
	transition:right .5s;
}

.node-wrap-box.branchFlow .error-tip,.node-wrap-box.condition .error-tip,.node-wrap-box.interflow .error-tip
{
	right:60px;
}

.end-node
{
	font-size:12px;
	text-align:center;
	display:flex;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
}

.end-node:before
{
	content:"";
	width:10px;
	height:10px;
	border:none;
	border-radius:50%;
	background:#a9b4cd;
	margin:auto auto 12px;
}

.flow-path-card
{
	width:220px;
	min-height:82px;
	text-align:left;
	cursor:pointer;
	overflow:hidden;
	position:relative;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-box-shadow:0 0 6px 0 rgba(0,0,0,.3);
	box-shadow:0 0 6px 0 rgba(0,0,0,.3);
	background:#fff;
	border-radius:2px;
	font-size:12px;
}

.flow-path-card.timer .header
{
	color:#f5811c;
	border-bottom:1px solid #eee;
}

.flow-path-card.timer .header .actions
{
	color:#606266;
}

.flow-path-card.start-node:hover
{
	-webkit-box-shadow:0 0 0 2px #576a95,0 0 5px 4px rgba(0,0,0,.2);
	box-shadow:0 0 0 2px #576a95,0 0 5px 4px rgba(0,0,0,.2);
}

.flow-path-card.start-node .header
{
	background-color:#576a95;
}

.flow-path-card .header
{
	padding-left:10px;
	padding-right:30px;
	width:100%;
	height:30px;
	line-height:30px;
	color:#fff;
	position:relative;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

.flow-path-card .header .title-box
{
	position:relative;
	display:inline-block;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.flow-path-card .header .title-input
{
	 position: absolute;
	 left: -12px;
	 border: none;
	 background: inherit;
	 color: inherit;
}

.flow-path-card .header .title-input:focus
{
	border-radius:4px;
	font-size:12px;
	width:97%;
	margin-left:1px;
	height:18px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-box-shadow:0 0 1px 1px #336699;
	box-shadow:0 0 1px 1px #336699;
	background-color:#ebeef5;
	color:#000;
	opacity:1;
	padding:2px 2px 2px 4px;
}

.flow-path-card .header .title-text
{
	vertical-align:middle;
}

.flow-path-card .header>.actions
{
	position:absolute;
	right:0;
	top:0;
	visibility:hidden;
}

.flow-path-card .header>.async-state
{
	position:absolute;
	right:25px;
	top:5px;
}

.flow-path-card.subFlow .header .title-box
{
	width:140px!important;
}

.flow-path-card.start-node:hover .title-text,.flow-path-card:not(.start-node):not(.timer):hover .title-text
{
	border-bottom:1px dashed currentColor;
}

.flow-path-card .body
{
	position:relative;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	padding:10px;
}

.flow-path-card .body .text
{
	margin:0 ellipsis(4);
}

.flow-path-card .icon-wrapper
{
	position:absolute;
	top:0;
	height:100%;
	width:14px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

.flow-path-card .icon-wrapper.left
{
	left:0;
}

.flow-path-card .icon-wrapper>.left-arrow,.flow-path-card .icon-wrapper>.right-arrow
{
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}

.flow-path-card.condition .header
{
	line-height:30px;
	color:inherit;
	border-bottom:1px solid #eee;
}

.flow-path-card.condition .header .title-box
{
	height:auto!important;
}

.flow-path-card.condition .header .title-text
{
	color:#15bc83;
}

.flow-path-card.condition .body
{
	color:#606266;
	padding:10px;
}

.flow-path-card.condition .icon-wrapper:hover
{
	background-color:#f1f1f1;
}

.flow-path-card.condition .left-arrow,.flow-path-card.condition .right-arrow
{
	visibility:hidden;
}

.flow-path-card.condition:hover .left-arrow,.flow-path-card.condition:hover .right-arrow
{
	visibility:visible;
}

.add-node-btn-box
{
	width:220px;
	height:100px;
	position:relative;
	padding-top:30px;
	margin:auto;
}

.branchHeight{
	height: 100px;
}

.add-node-btn-box:before
{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	// z-index:-1;
	width:1px;
	height:100%;
	background-color:#a9b4cd;
	margin:auto;
}

.add-node-btn-box .add-node-btn
{
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	z-index: 2;
}

.add-node-btn-box .add-node-btn .btn
{
	width:32px;
	height:32px;
	border-radius:50%;
	cursor:pointer;
	outline:none;
	background-color:#336699;
	-webkit-transition:0 .5s;
	transition:transform .5s,-webkit-transform .5s;
	border-color:transparent;
	z-index: 2;
}

.add-node-btn-box .add-node-btn .btn:hover
{
	-webkit-transform:scale(1.2);
	transform:scale(1.2);
	-webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.1);
	box-shadow:0 8px 16px 0 rgba(0,0,0,.1);
}

.branch-wrap .branch-box-wrap
{
	display:inline-flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
}

.branch-wrap .branch-box
{
	-webkit-box-align:stretch;
	-ms-flex-align:stretch;
	align-items:stretch;
	border-bottom:1px solid #a9b4cd;
	border-top:1px solid #a9b4cd;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	background:#ebeef5;
}

.branch-wrap .branch-box>.col-box
{
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	position:relative;
}

.branch-wrap .branch-box>.col-box:first-of-type:after,.branch-wrap .branch-box>.col-box:first-of-type:before
{
	content:"";
	position:absolute;
	left:0;
	height:3px;
	width:calc(50% - 1px);
	background:#ebeef5;
}

.branch-wrap .branch-box>.col-box:last-of-type:after,.branch-wrap .branch-box>.col-box:last-of-type:before
{
	content:"";
	position:absolute;
	right:0;
	height:3px;
	width:calc(50% - 1px);
	background:#ebeef5;
}

.branch-wrap .branch-box>.col-box .center-line
{
	height:100%;
	width:1px;
	background:#a9b4cd;
	position:absolute;
}

.branch-wrap .branch-box>.btn
{
	font-size:14px;
	z-index:99;
	cursor:pointer;
	position:absolute;
	top:0;
	left:50%;
	outline:none;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	border:none;
	border-radius:15px;
	background:#fff;
	-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,.2);
	box-shadow:0 0 10px 0 rgba(0,0,0,.2);
	-webkit-transition:0 .3s;
	transition:transform .3s,-webkit-transform .3s;
	color:#336699;
	padding:9px 16px;
}

.branch-wrap .branch-box>.btn:hover
{
	-webkit-transform:scale(1.1) translate(-46%,-50%);
	transform:scale(1.1) translate(-46%,-50%);
}

.condition-box
{
	display:flex;
	-ms-flex-pack:distribute;
	justify-content:space-around;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	text-align:center;
	padding:10px 0;
}

.condition-box>div:first-child .iconfont
{
	color:#ff943e;
}

.condition-box>div:nth-child(2) .iconfont
{
	color:#3296fa;
}

.condition-box .condition-disabled
{
	color:#c0c4cc;
}

.condition-box .condition-disabled .condition-icon
{
	background:#e5e5e5;
	color:#999;
	cursor:default;
}

.condition-box .condition-disabled .condition-icon:hover
{
	background:#e5e5e5;
	-webkit-box-shadow:none;
	box-shadow:none;
}

.condition-box .condition-disabled .condition-icon:hover>.icon-ym,.condition-box .condition-disabled .condition-icon:hover>.ym-custom,.condition-box .condition-disabled .condition-icon:hover>[class^=el-icon-]
{
	color:#999;
}

.condition-box .condition-icon
{
	width:60px;
	height:60px;
	line-height:60px;
	border:1px solid #e5e5e5;
	border-radius:30px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	font-size:12px;
	cursor:pointer;
	margin-bottom:4px;
}

.condition-box .condition-icon .icon-ym,.condition-box .condition-icon .ym-custom,.condition-box .condition-icon [class^=el-icon-]
{
	font-size:32px;
}

.condition-box .condition-icon:hover
{
	background:#3296fa;
	-webkit-box-shadow:0 0 8px 4px rgba(0,0,0,.1);
	box-shadow:0 0 8px 4px rgba(0,0,0,.1);
}

.relative
{
	position:relative;
}

.flex
{
	display:flex;
}

.justify-center
{
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
}

.icon
{
	vertical-align:middle;
	width:14px;
	height:14px;
	font-size:14px;
}

.priority
{
	position:absolute;
	right:0;
	font-size:12px;
}

.node-wrap-box.error.branchFlow .error-tip,.node-wrap-box.error.condition .error-tip,.node-wrap-box.error.interflow .error-tip,.flow-path-card .icon-wrapper.right
{
	right:0;
}

.flow-path-card:hover,.flow-path-card.approver:hover,.flow-path-card.subFlow:hover
{
	-webkit-box-shadow:0 0 0 2px #336699,0 0 5px 4px rgba(0,0,0,.2);
	box-shadow:0 0 0 2px #336699,0 0 5px 4px rgba(0,0,0,.2);
}

.flow-path-card.copy .header,.flow-path-card.approver .header,.flow-path-card.subFlow .header
{
	background-color:#336699;
}

.flow-path-card.timer:hover .actions,.flow-path-card:not(.start-node):not(.timer):hover .actions
{
	visibility:visible;
	margin-right:4px;
}

.col-box:first-of-type>.node-wrap .left,.col-box:last-of-type>.node-wrap .right,.flow-path-card.condition:hover .priority,input::-ms-clear,input::-ms-reveal
{
	display:none;
}

.add-node-btn-box .add-node-btn .btn .icon,.condition-box .condition-icon:hover>.icon-ym,.condition-box .condition-icon:hover>.ym-custom,.condition-box .condition-icon:hover>[class^=el-icon-]
{
	color:#fff;
}

.branch-wrap .branch-box>.col-box:first-of-type:before,.branch-wrap .branch-box>.col-box:last-of-type:before
{
	top:-2px;
}

.branch-wrap .branch-box>.col-box:first-of-type:after,.branch-wrap .branch-box>.col-box:last-of-type:after
{
	bottom:-2px;
}